<script setup lang="ts">
import { computed } from 'vue';
import { NButton, NSpace, NTabPane, NTabs } from 'naive-ui';

interface StyleConfig {
  theme: {
    primaryColor: string;
    secondaryColor: string;
    accentColor: string;
    backgroundColor: string;
    surfaceColor: string;
  };
  typography: {
    fontFamily: string;
    baseFontSize: number;
    headingScale: number;
    lineHeight: number;
    letterSpacing: number;
  };
  layout: {
    borderRadius: number;
    spacing: number;
    maxWidth: number;
    gridGap: number;
  };
  components: {
    buttonStyle: 'filled' | 'outlined' | 'ghost';
    cardElevation: number;
    inputStyle: 'underline' | 'outline' | 'filled';
  };
}

interface Props {
  styleConfig: StyleConfig;
  contentType: 'landing' | 'product' | 'blog';
  device: 'mobile' | 'tablet' | 'desktop';
  isDark: boolean;
  generatedTemplate: string;
}

const props = defineProps<Props>();

const emit = defineEmits<{
  (e: 'update:contentType', type: 'landing' | 'product' | 'blog'): void;
  (e: 'update:device', device: 'mobile' | 'tablet' | 'desktop'): void;
  (e: 'update:isDark', isDark: boolean): void;
}>();

const deviceWidths = {
  mobile: 375,
  tablet: 768,
  desktop: 1440
};

const previewStyles = computed(() => {
  const { theme, typography, layout, components } = props.styleConfig;
  const isDark = props.isDark;

  return {
    fontFamily: typography.fontFamily,
    fontSize: `${typography.baseFontSize}px`,
    lineHeight: typography.lineHeight,
    letterSpacing: `${typography.letterSpacing}px`,
    backgroundColor: isDark ? '#1a1a1a' : theme.backgroundColor,
    color: isDark ? '#ffffff' : '#000000',
    borderRadius: `${layout.borderRadius}px`,
    spacing: `${layout.spacing}px`,
    maxWidth: `${layout.maxWidth}px`,
    gridGap: `${layout.gridGap}px`,
    buttonStyle: components.buttonStyle,
    cardElevation: components.cardElevation,
    inputStyle: components.inputStyle
  };
});

function getButtonStyles(style: string, color: string) {
  const baseStyles = {
    padding: '12px 24px',
    borderRadius: `${props.styleConfig.layout.borderRadius}px`,
    fontFamily: props.styleConfig.typography.fontFamily,
    fontSize: `${props.styleConfig.typography.baseFontSize}px`,
    cursor: 'pointer',
    transition: 'all 0.2s ease',
    border: 'none'
  };

  switch (style) {
    case 'filled':
      return {
        ...baseStyles,
        backgroundColor: color,
        color: '#ffffff',
        ':hover': {
          opacity: 0.9
        }
      };
    case 'outlined':
      return {
        ...baseStyles,
        backgroundColor: 'transparent',
        color,
        border: `2px solid ${color}`,
        ':hover': {
          backgroundColor: color,
          color: '#ffffff'
        }
      };
    case 'ghost':
      return {
        ...baseStyles,
        backgroundColor: 'transparent',
        color,
        border: `1px solid ${color}50`,
        ':hover': {
          backgroundColor: `${color}20`,
          borderColor: color
        }
      };
    default:
      return baseStyles;
  }
}

function getPreviewContent() {
  // const { theme } = props.styleConfig;

  const contentMap = {
    landing: {
      title: '欢迎来到我们的网站',
      subtitle: '专业的解决方案，卓越的用户体验',
      description: '我们致力于为您提供最优质的产品和服务，让技术成为您业务发展的强大助力。',
      features: ['专业团队', '创新技术', '贴心服务', '持续支持'],
      ctaText: '立即开始'
    },
    product: {
      title: '产品展示',
      subtitle: '发现我们的核心产品',
      description: '每一款产品都经过精心设计和严格测试，确保为用户带来最佳体验。',
      features: ['高性能', '易用性', '安全可靠', '持续更新'],
      ctaText: '了解更多'
    },
    blog: {
      title: '最新资讯',
      subtitle: '分享行业洞察与技术心得',
      description: '我们的团队定期分享最新的行业动态、技术趋势和实践经验。',
      features: ['行业分析', '技术教程', '案例分享', '最佳实践'],
      ctaText: '阅读更多'
    }
  };

  return contentMap[props.contentType];
}
</script>

<template>
  <div class="template-preview">
    <!-- Header Controls -->
    <div class="preview-header mb-16px">
      <NTabs :value="contentType" type="segment" class="flex-1" @update:value="emit('update:contentType', $event)">
        <NTabPane name="landing" tab="首页" />
        <NTabPane name="product" tab="产品" />
        <NTabPane name="blog" tab="博客" />
      </NTabs>

      <NSpace :size="8" class="mb-20px">
        <!-- Device Switcher -->
        <NButton
          v-for="dev in ['mobile', 'tablet', 'desktop'] as const"
          :key="dev"
          :type="device === dev ? 'primary' : 'default'"
          size="small"
          quaternary
          @click="emit('update:device', dev)"
        >
          {{ dev === 'mobile' ? '📱' : dev === 'tablet' ? '📱' : '🖥️' }}
        </NButton>

        <!-- Dark Mode Toggle -->
        <NButton :type="isDark ? 'primary' : 'default'" size="small" quaternary @click="emit('update:isDark', !isDark)">
          {{ isDark ? '☀️' : '🌙' }}
        </NButton>
      </NSpace>
    </div>

    <!-- Preview Content -->
    <div class="preview-container">
      <div
        class="preview-content"
        :style="{
          width: `${deviceWidths[device]}px`,
          maxWidth: '100%',
          margin: '0 auto',
          backgroundColor: previewStyles.backgroundColor,
          color: previewStyles.color,
          fontFamily: previewStyles.fontFamily,
          fontSize: previewStyles.fontSize,
          lineHeight: previewStyles.lineHeight,
          letterSpacing: previewStyles.letterSpacing,
          borderRadius: previewStyles.borderRadius,
          boxShadow: '0 4px 20px rgba(0, 0, 0, 0.1)',
          overflow: 'hidden',
          transition: 'all 0.3s ease'
        }"
      >
        <!-- Generated Template Content -->
        <div v-if="generatedTemplate" class="generated-content" v-html="generatedTemplate" />
        <!-- eslint-disable-line vue/no-v-html -->
        <!-- Default Preview Content -->
        <div v-else class="default-preview p-24px">
          <!-- Header -->
          <header
            class="mb-32px"
            :style="{
              padding: previewStyles.spacing,
              backgroundColor: previewStyles.backgroundColor,
              borderBottom: `1px solid ${isDark ? '#333' : '#e5e7eb'}`
            }"
          >
            <div class="flex items-center justify-between">
              <div class="text-xl font-bold" :style="{ color: previewStyles.color }">Logo</div>
              <nav class="flex gap-16px">
                <a
                  v-for="link in ['首页', '产品', '博客', '关于']"
                  :key="link"
                  href="#"
                  :style="{ color: previewStyles.color, textDecoration: 'none' }"
                  class="hover:opacity-70"
                >
                  {{ link }}
                </a>
              </nav>
            </div>
          </header>

          <!-- Main Content -->
          <main
            class="px-24px"
            :style="{
              maxWidth: `${parseInt(previewStyles.maxWidth) - 48}px`,
              margin: '0 auto'
            }"
          >
            <div class="mb-48px text-center">
              <h1
                class="mb-16px"
                :style="{
                  fontSize: `${parseInt(previewStyles.fontSize) * styleConfig.typography.headingScale * styleConfig.typography.headingScale}px`,
                  color: styleConfig.theme.primaryColor
                }"
              >
                {{ getPreviewContent().title }}
              </h1>
              <p
                class="mb-24px text-lg"
                :style="{
                  color: previewStyles.color,
                  opacity: 0.8
                }"
              >
                {{ getPreviewContent().subtitle }}
              </p>
              <p
                class="mb-32px"
                :style="{
                  maxWidth: '600px',
                  margin: '0 auto',
                  color: previewStyles.color,
                  opacity: 0.7
                }"
              >
                {{ getPreviewContent().description }}
              </p>
              <button
                :style="getButtonStyles(previewStyles.buttonStyle, styleConfig.theme.primaryColor)"
                class="font-semibold"
              >
                {{ getPreviewContent().ctaText }}
              </button>
            </div>

            <!-- Features Grid -->
            <div
              class="grid mb-48px"
              :style="{
                gridTemplateColumns: 'repeat(auto-fit, minmax(250px, 1fr))',
                gap: previewStyles.gridGap
              }"
            >
              <div
                v-for="(feature, index) in getPreviewContent().features"
                :key="index"
                class="rounded-lg p-24px"
                :style="{
                  backgroundColor: styleConfig.theme.surfaceColor,
                  borderRadius: `${previewStyles.borderRadius}px`,
                  boxShadow: `0 ${previewStyles.cardElevation}px ${previewStyles.cardElevation * 2}px rgba(0, 0, 0, 0.1)`
                }"
              >
                <div
                  class="mb-16px h-48px w-48px flex items-center justify-center rounded-full"
                  :style="{
                    backgroundColor: styleConfig.theme.primaryColor,
                    color: '#ffffff'
                  }"
                >
                  ✓
                </div>
                <h3
                  class="mb-8px font-semibold"
                  :style="{
                    fontSize: `${parseInt(previewStyles.fontSize) * styleConfig.typography.headingScale}px`,
                    color: previewStyles.color
                  }"
                >
                  {{ feature }}
                </h3>
                <p :style="{ color: previewStyles.color, opacity: 0.7 }">
                  详细描述这个功能的特点和优势，让用户更好地了解产品的价值。
                </p>
              </div>
            </div>
          </main>

          <!-- Footer -->
          <footer
            class="mt-48px p-24px text-center"
            :style="{
              backgroundColor: styleConfig.theme.surfaceColor,
              borderTop: `1px solid ${isDark ? '#333' : '#e5e7eb'}`
            }"
          >
            <p :style="{ color: previewStyles.color, opacity: 0.6 }">© 2024 Your Company. All rights reserved.</p>
          </footer>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.template-preview {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.preview-header {
  display: flex;
  align-items: center;
  gap: 16px;
}

.preview-container {
  flex: 1;
  overflow: auto;
  padding: 16px;
  background-color: #f5f5f5;
  border-radius: 8px;
}

.preview-content {
  transition: all 0.3s ease;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .preview-header {
    flex-direction: column;
    align-items: stretch;
  }
}

:deep(.n-tabs-nav) {
  flex: 1;
}
</style>
